<!--  -->
<template>
    <van-config-provider :theme-vars="themeVars">
        <div class="orderdetail-container">
            <div class="orderdetail-statusbar">
                <steps
                    class="order-steps"
                    :steps="steps"
                    :activeIndex="activeIndex" />
            </div>
            <div class="orderdetail-ordercontent">
                <maintenancecheck-order-detail-card
                    :orderDetial="maintiancheckdata"></maintenancecheck-order-detail-card>
            </div>
            <order-bottom-panel
                v-if="showbuttonpanel"
                :buttons="buttons"/>
        </div>
    </van-config-provider>
</template>

<script>
// import { showSuccess, showError } from '@/util/MessageDeal';
// import { selfI18n } from '@/i18n';
import { reactive, toRefs, onBeforeMount } from 'vue';
import { useRouter } from 'vue-router';
import { ConfigProvider } from 'vant';
// import useMaintenanceOrderConfigSetup from '@/setup/maintenanceteam/MaintanceOrderConfigSetup.js';
import useMaintenanceOrderConfigSetup from '@/setup/maintaincheckorder/MaintaincheckorderActionSetup';
import Cookies from 'js-cookie';
import MaintaincheckorderDetailSetup from '@/setup/maintaincheckorder/MaintaincheckorderDetailSetup';
// import { getRepairStatusData } from '@/setup/repair/RepairStautsFormat';
import { getStatusData } from '@/setup/maintaincheckorder/MaintaincheckStatusFormat';
import MaintenancecheckOrderDetailCard from '@/components/maintenance_control/maintaincheckorder/MaintenancecheckOrderDetailCard.vue';
import Steps from '@/components/_common/Steps.vue';
import OrderBottomPanel from '@/components/maintenance_control/common/OrderBottomPanel.vue';
import useMaintenanceMembersSetup from '@/setup/maintenanceteam/MaintenanceTeamMembersSetup.js';
import { useProductArchiveDevicesSetup } from '@/setup/productarchive/ProductArchiveDevicesSetup.js';
// import { inviteEvaluate } from '@/api/server';
// import { apiService } from '@/api/apiService.js';
// import { useStore } from 'vuex';
export default {
    name: 'MaitenancecheckOrderDetail',
    components: {
        MaintenancecheckOrderDetailCard,
        Steps,
        OrderBottomPanel,
        [ConfigProvider.name]: ConfigProvider
    // [ActionBar.name]: ActionBar,
    // [ActionBarButton.name]: ActionBarButton
    },
    props: {
        maintainworkorderid: String
    },
    setup (props) {
    // /alert(props.repairId);
        // const $t = selfI18n;
        const router = useRouter();
        const { getMaintaincheckorderDetail } = MaintaincheckorderDetailSetup();
        // const { repairstatus } = getRepairStatusData();
        const { checkorderstatus, getcheckvalue } = getStatusData();
        const { getAllMaintenanceTeamMembers } = useMaintenanceMembersSetup();
        const { getPrdArchDetail } = useProductArchiveDevicesSetup();
        const state = reactive({
            maintiancheckdata: {},
            evalData: {},
            username: Cookies.get('username'),
            isShowEval: false,
            activeIndex: 0,
            steps: checkorderstatus
                .filter((status) => status.value !== 'all')
                .map((status) => {
                    return {
                        label: status.label,
                        value: parseInt(status.value)
                    };
                }),
            buttons: [],
            isShowdevice: true,
            showdevice: false,
            devicedetail: {},
            // uuid: '',
            manucode: '',
            showedit: false,
            showbuttonpanel: false
            // isshowedit:true;
        });
        const themeVars = {
            tabbarItemMarginBottom: '0px'
        };
        const {
            procRate,
            procRateTxt,
            isShowtransfer,
            // isShowendorder,
            isShowdeal,
            isShowrecord,
            // isShowcancel,
            // isShowsubmit,
            isShowcheck
        } = useMaintenanceOrderConfigSetup(state);
        const gotorecord = () => {
            router.push({
                path: '/maintaincheckorderrecord',
                query: { maintainworkorderid: props.maintainworkorderid }
            });
        };
        onBeforeMount(async () => {
            const params = {
                maintainworkorderid: props.maintainworkorderid,
                username: state.username
            };
            const res = await getMaintaincheckorderDetail(params);
            if (res.result !== 'success') {
                return;
            }
            Object.assign(state.maintiancheckdata, res.value);
            state.maintiancheckdata = res.value;
            state.manucode = res.value.manufacturecode;
            state.activeIndex = getcheckvalue(state.maintiancheckdata.status);
            if (isShowtransfer.value) {
                state.buttons.push({
                    // isPrimary: false,
                    text: '转派',
                    callback () {
                        router.push({
                            name: 'checkorderreassignment',
                            params: { maintainworkorderid: state.maintiancheckdata.maintainworkorderid },
                            query: {
                                administrator: state.maintiancheckdata.administrator,
                                administratoralias: state.maintiancheckdata.administratoralias
                                // company: state.repairData.company
                            }
                        });
                    }
                });
            };
            if (isShowdeal.value) {
                state.buttons.push({
                    // isPrimary: false,
                    text: '处理',
                    callback () {
                        // router.push({
                        //     name: 'maintaincheckorderrecord',
                        //     query: { maintainworkorderid: state.maintiancheckdata.maintainworkorderid }
                        // });
                        gotorecord();
                    }
                });
            };
            if (isShowrecord.value) {
                state.buttons.push({
                    // isPrimary: false,
                    text: '维检记录',
                    callback () {
                        gotorecord();
                    }
                });
            };
            if (isShowcheck.value) {
                state.buttons.push({
                    // isPrimary: false,
                    text: '验收',
                    callback () {
                        gotorecord();
                    }
                });
            };
            // state.showedit = isShoweditBtn.value;
            state.showbuttonpanel = isShowcheck.value || isShowrecord.value || isShowdeal.value || isShowtransfer.value;
        });
        const refData = toRefs(state);
        const colsedialog = () => {
            state.showdevice = false;
        };
        const isshowedit = (val) => {
            if (val === '' || val === undefined) {
                return false;
            } else {
                return true;
            }
        };
        return {
            procRate,
            procRateTxt,
            isShowtransfer,
            isShowdeal,
            isShowrecord,
            isShowcheck,
            themeVars,
            // repairstatus,
            checkorderstatus,
            ...refData,
            getAllMaintenanceTeamMembers,
            getMaintaincheckorderDetail,
            colsedialog,
            isshowedit,
            getPrdArchDetail,
            getcheckvalue
        };
    },
    data () {
        return {
            listprops: [{
                id: 'devalias',
                label: '设备别名'
            }, {
                id: 'manufacturingCode',
                label: '出厂编号'
            }, {
                id: 'customer_name',
                label: '所属客户'
            }, {
                id: 'maintainer',
                label: '维保负责人',
                formatter: (detail) => {
                    const value = detail.maintainer || '--';
                    const alias = this.friendsObj && this.friendsObj[value];
                    const allalias = value + (alias ? ` (${alias})` : ' ');
                    return allalias || value;
                }
            },
            // {
            //     id: 'uuid',
            //     label: '设备号'
            // },
            {
                id: 'model',
                label: this.$st('chan-pin-xing-hao')
            }, {
                id: 'devicemanager',
                label: '客户负责人'
            }, {
                id: 'devicemanagerphone',
                label: '联系方式'
            }, {
                id: 'address',
                label: '地区',
                formatter: (detail) => {
                    return detail.address && detail.address.country ? detail.address.country + detail.address.province + detail.address.city : '--';
                }
            }, {
                id: 'label',
                label: '标签',
                type: 'label-btn'
            }, {
                id: 'remark',
                label: '备注'
            }],
            friendsObj: {},
            islogin: this.$store.state.islogin
        };
    },
    created () {
        this.onActivated();
    },
    computed: {

    },
    methods: {
        async onActivated () {
            const tmp = await this.getAllMaintenanceTeamMembers();
            tmp.value.forEach((item) => {
                this.friendsObj = reactive({ ...this.friendsObj, [item.account]: item.alias });
            });
        }
    }
};
</script>
<style>
/* :root {
  --van-tabbar-item-margin-bottom: 0px;
} */
</style>
<style lang='scss' scoped>
.orderdetail-container {
  //   background: linear-gradient(180deg, #3875c6, rgba(56, 117, 198, 0) 100%);
  height: 100vh;
  overflow: scroll;
  background-attachment: fixed;
  background: linear-gradient(
    180deg,
    #3875c6,
    rgba(56, 117, 198, 0) 70%,
    rgba(56, 117, 198, 0) 100%
  );

  // background:red
}
.infoclass{
    padding: 16px 0px 16px 0px;
   text-align: center;

}
.orderdetail-ordercontent {
  margin-bottom: 10px;
}
.editbtnclass{
    text-align: center;

    .editbtn{
        width: 345px;
        height: 44px;
    }
}
.orderdetail-statusbar {
  background-color: transparent;
  margin-left: 16px;
  margin-right: 16px;
}
.order-steps {
  margin-top: 20px;
 margin-bottom: 12px;
  background-color: transparent;
}

.footer-button {
  width: 108px;
  height: 40px;
}
</style>
